<template>
  <article class="page">
    <headerbar>{{headTitle}}</headerbar>
    <section class="frame-content-sub no-bg">
      <section class="inner-content pdv-9 pdh-4">

        <div class="input-column-wrap">
          <div class="name">培训计划名称：</div>
          <input type="text" v-model="form.trainingclass">
        </div>
        <div class="input-column-wrap">
          <div class="name">培训对象：</div>
          <div @click="" class="input-wrap">
            <input type="text" v-model="form.trainees">
          </div>
        </div>


        <div class="input-column-wrap">
          <div class="name">培训人数：</div>
          <input type="text" v-model="form.number">
        </div>
        <div class="input-column-wrap">
          <div class="name">培训期数：</div>
          <input type="text" v-model="form.numberofperiods">
        </div>
        <div class="input-column-wrap">
          <div class="name">培训地点：</div>
          <input type="text" v-model="form.place">
        </div>
        <div @click="showDateSegmentPicker" class="input-column-wrap">
          <div class="name">培训时间：</div>
          <input readonly type="text" v-model="form.time">
        </div>
        <div class="input-column-wrap">
          <div class="name">减少金额：</div>
          <input type="text" placeholder="(万元)" v-model="form.jsje">
        </div>
        <div class="input-column-wrap">
          <div class="name">师资费：</div>
          <input type="text" placeholder="(万元)" v-model="form.teachersmoney">
        </div>
        <div class="input-column-wrap">
          <div class="name">培训费用：</div>
          <input placeholder="(万元)" type="text" v-model="form.trainmoney">
        </div>
        <div class="input-column-wrap">
          <div class="name">培训内容：</div>
          <div></div>
        </div>

        <div class="input-row-wrap">
          <textarea v-model="form.trainingcontent" placeholder="请填写培训内容" name="" id="" cols="30" rows="5"></textarea>
        </div>


        <div class="pdv-3"></div>
        <div @click="save()" class="default-block-btn">提交</div>

        <div class="pdv-3"></div>

      </section>
    </section>
  </article>
</template>

<script>
  import moment from 'moment'
  import _ from 'lodash'
  let currYear = new Date().getFullYear()
  const dateSegmentData = [
    {
      is: 'cube-date-picker',
      title: '开始时间',
      min: new Date(),
      max: new Date(2030, 11, 31)
    },
    {
      is: 'cube-date-picker',
      title: '结束时间',
      min: new Date(),
      max: new Date(2030, 11, 31)
    }
  ]
  export default {
    name: 'trainingPlanAdd',
    data () {
      return {
        headTitle: '添加培训计划',
        selectedClass: {},
        selectedPerson: {},
        selectClassInstance: null,
        selectPersonInstance: null,
        form: {
          startTime: '',
          endTime: '',
          type: '0',
          "days": '',
          "deptid": "",
          "deptname": "",
          "jsje": '',
          "number": '',
          "numberofperiods": [],
          "place": "",
          "sfzc": "0",
          "state": "1",
          "teachersmoney": '',
          "time": "",
          "trainees": "",
          "trainingclass": "",
          "trainingcontent": "",
          "trainmoney": ''
        },
        className: '',
        dateSegmentPicker: null,
        datePicker: null
      }
    },
    mounted () {
      if (this.$route.query.id) {
        this.headTitle = '编辑培训计划'
        this.form = this.$store.state.trainingPlanDetail
      }
      this.dateSegmentPicker = this.$createSegmentPicker({
        data: dateSegmentData,
        onSelect: (selectedDates, selectedVals, selectedTexts) => {
          this.form.time = this.tools.formatDate(selectedTexts[0]) +' - '+ this.tools.formatDate(selectedTexts[1])
        },
        onNext: (i, selectedDate, selectedValue, selectedText) => {
          dateSegmentData[1].min = selectedDate
          if (i === 0) {
            this.dateSegmentPicker.$updateProps({
              data: dateSegmentData
            })
          }
        }
      })
    },
    methods: {
      showDateSegmentPicker() {
        this.dateSegmentPicker.show()
      },
      showTimePicker () {
        if (!this.datePicker) {
          let me = this
          let nowYear = new Date().getFullYear()
          this.datePicker = this.$createDatePicker({
            min: new Date(2008, 7, 8),
            max: new Date(),
            value: new Date(),
            onSelect: (selectedTime, selectedText, formatedTime) => {
              this.form.time = moment(selectedTime).format('YYYY-MM-DD')
            }
          })
        }
        this.datePicker.show()
      },
      /*选择对象*/
      selectPerson () {
        console.log(this)
        if (this.selectPersonInstance) {
          this.selectPersonInstance.show()
        } else {
          this.selectPersonInstance = this.$createPersonSelect({
            $events: {
              onSelect: item => {
                console.log('onSelect', item)
                this.selectedPerson = item
                this.form.trainees = this.getUserNames(this.selectedPerson).join(',')
                this.form.number = this.selectedPerson.length
              }
            }
          }).show()
        }
      },
      /*获取用户名称*/
      getUserNames (personList) {
        let ret = []
        personList.forEach(v => {
          ret.push(v.userName)
        })
        return ret
      },
      /*选择培训班*/
      selectClass () {
        console.log(this)
        if (this.selectClassInstance) {
          this.selectClassInstance.show()
        } else {
          this.selectClassInstance = this.$createTrainClass({
            $events: {
              onSelect: item => {
                console.log('onSelect', item)
                this.selectedClass = item
                if (Array.isArray(item) && item.length > 0) {
                  let _data = item[0]
                  this.form.deptname = _data.deptname
                  this.form.deptid = _data.deptId
                  this.className = _data.className
                }
              }
            }
          }).show()
        }
      },
      save () {
        let params = _.extend({}, this.form)
        this.tools.showLoading('提交中...')
        params.type = '1' // 计划审核中
        this.fetchService.trainingPlanInfoSaveOrUpdate(params).then(res => {
          this.tools.hideLoading()
          if (res.code !== 0) {
            return this.tools.tip(res.message || '接口服务出错，请联系管理员')
          }
          this.tools.alert('提交成功')
        })
      }
    }
  }
</script>

<style scoped>

</style>
